import 'package:auto_route/auto_route.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';

import '../../../config/route/bt_app_router.gr.dart';
import '../../../data/db/models/bt_static_comment.dart';
import '../models/bt_post_details_model.dart';

class BtCommentItemWidget extends StatelessWidget {
  const BtCommentItemWidget({super.key, required this.item, required this.model});

  final BtStaticComment item;

  final BtPostDetailsModel model;

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.only(left: 16, right: 10),
        child: Container(
          padding: const EdgeInsets.only(top: 24, bottom: 16),
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(
                width: item.isLast ? 0.0 : 0.5,
                color: item.isLast ? Colors.transparent : const Color(0xFFCCCCCC),
              ),
            ),
          ),
          child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Stack(
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(20),
                      child: CachedNetworkImage(
                        width: 40,
                        height: 40,
                        fit: BoxFit.cover,
                        imageUrl: item.avatar,
                      ),
                    ),
                    Visibility(
                      visible: !item.followed && !item.isSender,
                      child: Positioned(
                        right: 0,
                        bottom: 0,
                        child: InkWell(
                          child: Image.asset(
                            'assets/images/bt_icon_add.png',
                            width: 15,
                            height: 15,
                          ),
                          onTap: () {
                            EasyLoading.show(status: 'Loading...');
                            model.addFriend(item.userId, (success, msg) {
                              if (success) {
                                model.updateFollowed(item);
                              }
                              EasyLoading.showToast(msg);
                            });
                          },
                        ),
                      ),
                    )
                  ],
                ),
                Expanded(
                    child: Padding(
                  padding: const EdgeInsets.only(left: 8),
                  child: Text(
                    item.nickname,
                    style:
                        const TextStyle(fontSize: 18, color: Color(0xFF404040), fontWeight: FontWeight.bold),
                  ),
                )),
                InkWell(
                  child: Image.asset(
                    'assets/images/bt_icon_chat.png',
                    width: 31,
                    height: 24,
                  ),
                  onTap: () {
                    context.router.navigate(ChatRoute(
                        targetId: item.userId, targetName: item.nickname, targetAvatar: item.avatar));
                  },
                )
              ],
            ),
            Padding(
              padding: const EdgeInsets.only(top: 12, bottom: 16),
              child: Text(
                item.content,
                style: const TextStyle(fontSize: 12, color: Color(0xFF404040), fontWeight: FontWeight.normal),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                InkWell(
                  child: Image.asset(
                    item.liked ? 'assets/images/bt_icon_liked.png' : 'assets/images/bt_icon_like.png',
                    width: 18,
                    height: 20,
                  ),
                  onTap: () {
                    model.toggleLike(item, !item.liked);
                  },
                ),
                Text(
                  ' ${item.likes}',
                  style:
                      const TextStyle(fontSize: 16, color: Color(0xFFCCCCCC), fontWeight: FontWeight.normal),
                ),
              ],
            )
          ]),
        ));
  }
}
